<template>
  <div class="demo-block">
    <h4>弹出位置</h4>
    <div class="demo-row">
      <my-popover position="top">
        <span>我是上方内容</span>
        <my-button slot="trigger">上方弹出</my-button>
      </my-popover>
       <my-popover position="bottom">
        <span>我是下边内容</span>
        <my-button slot="trigger">下边弹出</my-button>
      </my-popover>
       <my-popover position="left">
        <span>我是左内容</span>
        <my-button slot="trigger">左边弹出</my-button>
      </my-popover>
       <my-popover position="right">
        <span>我是右边内容</span>
        <my-button slot="trigger">右边弹出</my-button>
      </my-popover>
    </div>
  </div>
</template>

<script>
import button from "../../../../src/components/button";
import popover from "../../../../src/components/popover";
export default {
  components: { "my-button": button, "my-popover": popover },
};
</script>

<style scoped>
.demo-row {
  margin: -10px;
}
</style>